<template>
  <div class="app-container">
    <dv-border-box-11 title="人脸美颜">
      <div style="padding: 60px 60px 100px;">
        <dv-decoration-10 style="width:100%;height:40px;"/>
        <h1>核心能力</h1>
        用户上传一张人脸图片，基于人脸编辑与生成算法，为人脸照片增加美颜效果。
        <el-row>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="text-align:center;margin: 20px;padding: 20px;height: 650px">
                <div style="margin:10px">
                  <el-row>
                    <el-col :span="12">
                      <span> 美白程度：<el-input-number v-model="form.whitening" :min="0" :max="100"></el-input-number></span>
                    </el-col>
                    <el-col :span="12">
                      <span> 磨皮程度：<el-input-number v-model="form.smoothing" :min="0" :max="100"></el-input-number></span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <span> 瘦脸程度：<el-input-number v-model="form.faceLifting" :min="0" :max="100"></el-input-number></span>
                    </el-col>
                    <el-col :span="12">
                      <span> 大眼程度：<el-input-number v-model="form.eyeEnlarging" :min="0" :max="100"></el-input-number></span>
                    </el-col>
                  </el-row>
                </div>
                <image-identify-oss @input="getUrlList"></image-identify-oss>
                <el-input placeholder="请输入在线图片url（上传图片和输入url二选一）" v-model="form.url" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchBeautifyPic"></el-button>
                </el-input>
              </div>
            </dv-border-box-9>
          </el-col>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="height: 650px;margin: 20px;padding: 20px">
                <el-collapse v-model="collapse" accordion>
                  <el-collapse-item title="识别结果" name="1">
                    <div>
                      <el-image :src="responseData.resultUrl" :preview-src-list="responseData.resultUrlList" style="width: 200px; height: 200px"></el-image>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="Request" name="2">
                    <json-viewer :value="form" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                  <el-collapse-item title="Response" name="3">
                    <json-viewer :value="responseData" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </dv-border-box-9>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {beautifyPic} from "@/api/txcloud/face/faceshizhuang";

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      collapse: '0',
      form: {
        whitening: 30,
        smoothing: 10,
        faceLifting: 70,
        eyeEnlarging: 70,
      },
      responseData: {
        resultUrlList: []
      },
    }
  },
  created() {
  },
  methods: {
    searchBeautifyPic() {
      beautifyPic(this.form).then(res => {
          if (res.code === 200) {
            this.responseData = res.data
            let a = []
            a.push(res.data.resultUrl)
            this.responseData.resultUrlList = a
            this.collapse = '1'
            this.$modal.msgSuccess(res.msg);
          } else {
            this.responseData.hasText = "false"
            this.$modal.msgError(res.msg);
          }
        }
      )
    },
    getUrlList(val) {
      this.form.url = val
    },
    getImageBase64(val) {
      this.form.image = val
    },
  }
};
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;

  .el-select {
    width: 10vw;
  }
}
</style>
